<div [class.form-group]="(model.type !== 'GROUP' && asBootstrapFormGroup) || getClass('element', 'container').includes('form-group')"
     [formGroup]="group"
     [ngClass]="['ng-dynamic-forms-'+model.type.toLowerCase(), getClass('element', 'container'), getClass('grid', 'container')]">

    <label *ngIf="!isCheckbox && hasLabel"
           [for]="id"
           [innerHTML]="model.label"
           [ngClass]="[getClass('element', 'label'), getClass('grid', 'label')]"></label>

    <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: model"></ng-container>

    <div [ngClass]="getClass('grid', 'control')">

        <ng-container #componentViewContainer></ng-container>

        <small *ngIf="hasHint" class="text-muted" [innerHTML]="hint" [ngClass]="getClass('element', 'hint')"></small>

        <div *ngIf="showErrorMessages" [ngClass]="[getClass('element', 'errors'), getClass('grid', 'errors')]">
            <small *ngFor="let message of errorMessages" class="invalid-feedback d-block">{{ message }}</small>
        </div>

    </div>

    <ng-container *ngTemplateOutlet="endTemplate?.templateRef; context: model"></ng-container>

    <ng-content></ng-content>

</div>
